<template>
  <el-main>
    <h1>数据统计</h1>
    <div style="margin: 0.5rem">🐏</div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div
          class="demo-shadow"
          :style="{ boxShadow: `var(--el-box-shadow-base)` }"
        >
          <div class="sale">
            <span>总销售额</span>
            <svg
              t="1640270800684"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2294"
              width="200"
              height="200"
            >
              <path
                d="M512 128a384 384 0 1 1-0.042667 768.042667A384 384 0 0 1 512 128z m-19.2 553.258667l76.501333-248.362667-16-1.408-91.52 11.690667-4.693333 13.994666c3.754667 0.085333 6.954667 0.256 9.6 0.512a17.066667 17.066667 0 0 1 13.226667 7.253334c2.986667 4.266667 4.266667 9.088 3.84 14.293333-0.725333 8.277333-3.584 20.48-8.533334 36.565333l-51.754666 166.954667c-4.181333 13.312-6.656 24.277333-7.424 33.109333-1.152 13.226667 1.28 24.533333 7.338666 33.792a33.28 33.28 0 0 0 26.282667 15.402667c30.08 2.645333 61.098667-26.112 93.269333-86.229333l-8.362666-7.936c-13.141333 22.016-24.106667 37.077333-32.853334 45.184-3.285333 3.328-6.4 4.864-9.429333 4.565333-1.834667-0.128-3.413333-1.365333-4.778667-3.797333a12.714667 12.714667 0 0 1-1.706666-7.509334c0.384-4.437333 2.688-13.866667 6.954666-28.074666zM554.496 384a41.301333 41.301333 0 0 0 30.293333-12.458667A41.301333 41.301333 0 0 0 597.333333 341.333333a41.429333 41.429333 0 0 0-12.373333-30.208 41.344 41.344 0 0 0-30.421333-12.458666 40.96 40.96 0 0 0-30.165334 12.458666A41.429333 41.429333 0 0 0 512 341.333333c0 11.776 4.138667 21.845333 12.501333 30.208 8.405333 8.277333 18.346667 12.458667 30.037334 12.458667z"
                p-id="2295"
              ></path>
            </svg>
          </div>
          <h1>{{ total }}</h1>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          class="demo-shadow"
          :style="{ boxShadow: `var(--el-box-shadow-base)` }"
        >
          <div class="sale">
            <span>总订单数</span>
            <svg
              t="1640270800684"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2294"
              width="200"
              height="200"
            >
              <path
                d="M512 128a384 384 0 1 1-0.042667 768.042667A384 384 0 0 1 512 128z m-19.2 553.258667l76.501333-248.362667-16-1.408-91.52 11.690667-4.693333 13.994666c3.754667 0.085333 6.954667 0.256 9.6 0.512a17.066667 17.066667 0 0 1 13.226667 7.253334c2.986667 4.266667 4.266667 9.088 3.84 14.293333-0.725333 8.277333-3.584 20.48-8.533334 36.565333l-51.754666 166.954667c-4.181333 13.312-6.656 24.277333-7.424 33.109333-1.152 13.226667 1.28 24.533333 7.338666 33.792a33.28 33.28 0 0 0 26.282667 15.402667c30.08 2.645333 61.098667-26.112 93.269333-86.229333l-8.362666-7.936c-13.141333 22.016-24.106667 37.077333-32.853334 45.184-3.285333 3.328-6.4 4.864-9.429333 4.565333-1.834667-0.128-3.413333-1.365333-4.778667-3.797333a12.714667 12.714667 0 0 1-1.706666-7.509334c0.384-4.437333 2.688-13.866667 6.954666-28.074666zM554.496 384a41.301333 41.301333 0 0 0 30.293333-12.458667A41.301333 41.301333 0 0 0 597.333333 341.333333a41.429333 41.429333 0 0 0-12.373333-30.208 41.344 41.344 0 0 0-30.421333-12.458666 40.96 40.96 0 0 0-30.165334 12.458666A41.429333 41.429333 0 0 0 512 341.333333c0 11.776 4.138667 21.845333 12.501333 30.208 8.405333 8.277333 18.346667 12.458667 30.037334 12.458667z"
                p-id="2295"
              ></path>
            </svg>
          </div>
          <h1>{{ count }}</h1>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          class="demo-shadow"
          :style="{ boxShadow: `var(--el-box-shadow-base)` }"
        >
          <div class="sale">
            <span>支付单数</span>
            <svg
              t="1640270800684"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2294"
              width="200"
              height="200"
            >
              <path
                d="M512 128a384 384 0 1 1-0.042667 768.042667A384 384 0 0 1 512 128z m-19.2 553.258667l76.501333-248.362667-16-1.408-91.52 11.690667-4.693333 13.994666c3.754667 0.085333 6.954667 0.256 9.6 0.512a17.066667 17.066667 0 0 1 13.226667 7.253334c2.986667 4.266667 4.266667 9.088 3.84 14.293333-0.725333 8.277333-3.584 20.48-8.533334 36.565333l-51.754666 166.954667c-4.181333 13.312-6.656 24.277333-7.424 33.109333-1.152 13.226667 1.28 24.533333 7.338666 33.792a33.28 33.28 0 0 0 26.282667 15.402667c30.08 2.645333 61.098667-26.112 93.269333-86.229333l-8.362666-7.936c-13.141333 22.016-24.106667 37.077333-32.853334 45.184-3.285333 3.328-6.4 4.864-9.429333 4.565333-1.834667-0.128-3.413333-1.365333-4.778667-3.797333a12.714667 12.714667 0 0 1-1.706666-7.509334c0.384-4.437333 2.688-13.866667 6.954666-28.074666zM554.496 384a41.301333 41.301333 0 0 0 30.293333-12.458667A41.301333 41.301333 0 0 0 597.333333 341.333333a41.429333 41.429333 0 0 0-12.373333-30.208 41.344 41.344 0 0 0-30.421333-12.458666 40.96 40.96 0 0 0-30.165334 12.458666A41.429333 41.429333 0 0 0 512 341.333333c0 11.776 4.138667 21.845333 12.501333 30.208 8.405333 8.277333 18.346667 12.458667 30.037334 12.458667z"
                p-id="2295"
              ></path>
            </svg>
          </div>
          <h1>{{ count }}</h1>
        </div>
      </el-col>
    </el-row>
    <h1>数据分析</h1>
    <div style="margin: 0.5rem">🐑</div>
    <el-row :gutter="24" class="el_row_charts">
      <el-col :span="12"><Charts /></el-col>
      <el-col :span="12"><Charts1 /></el-col>
    </el-row>
  </el-main>
</template>
<script>
import { onBeforeMount, ref } from "vue";
import { home } from "@/api/admin";
import Charts from "@/layout/Header/Charts.vue";
import Charts1 from "@/layout/Header/Charts1.vue";
export default {
  components: {
    Charts,
    Charts1,
  },
  setup() {
    const total = ref(0);
    const count = ref(0);
    onBeforeMount(() => {
      home().then((res) => {
        count.value = res.data.count.count;
        if (res.data.total.total == null) {
          total.value = 0;
        } else {
          total.value = res.data.total.total;
        }
        console.log(res.data.total.total);
      });
    });
    return {
      total,
      count,
    };
  },
};
</script>

<style lang="scss" scoped>
.demo-shadow {
  padding: 10px;
  margin: 0.1rem 0.5rem;
}
.sale {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 90%;
  // height: 85%;
  overflow-y: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: auto;
  margin-top: 20px;
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.el-main {
  background-color: #fff;
  min-height: 100vh;
}

@media screen and (max-width: 600px) {
  .el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
    align-content: center;
  }
  .el-row .el-col-8 {
    max-width: none;
  }
  .el-row > div {
    width: 100%;
    margin: 20px;
  }
  .el-col-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media screen and (max-width: 1000px) {
  .el_row_charts {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
    align-content: center;
  }
  .el_row_charts .el-col-8 {
    max-width: none;
  }
  .el_row_charts > div {
    width: 100%;
    margin: 20px;
  }
  .el-col-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
</style>
